<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.2.0/markdown-it.min.js"></script>-->
<script src="../../../node_modules/markdown-it/dist/markdown-it.js"></script>
<script src="../../../node_modules/markdown-it-attrs/markdown-it-attrs.browser.js"></script>
<div id="markdownbox"></div>
<script>
  var md = window.markdownit();


  md.use(
    window.markdownItAttrs,
    {
      // optional, these are default options
      leftDelimiter: '{',
      rightDelimiter: '}',
      allowedAttributes: []  // empty array = all attributes are allowed
    }
  )

  const text = `# header {.green #id}\nsome text {with=attrs and="attrs with space"}`

  var result = md.render(text);
  /*
    result: <h1 class="green" id="id">header</h1>
    <p with="attrs" and="attrs with space">some text</p>
  */

  console.log('result:',result);
  markdownbox.innerHTML = result;
</script>
</body>
</html>
